<template>
  <div class="page-reuse">
    <Form class="reuse-form" :label-width="120">
      <FormItem
        :required="item.required"
        :label="item.desc"
        v-for="(item,index) of args"
        :key="index"
        class="arg-form-item"
      >
        <!-- 输入框string -->
        <!-- <Input
          v-if="item.formEditType === 'string' || !item.formEditType"
          :value="item.value"
          placeholder="请输入参数"
          clearable
          @on-blur="reuseChange($event,item.name,index)"
        /> -->

        <AutoComplete
          v-if="item.formEditType === 'string' || !item.formEditType"
          :key="new Date().getTime()"
          :value="item.value"
          @autoBlur="reuseChange($event,item.name,index)"
        />

        <!-- 选择框dataSelector / conceptSelector-->
        <template
          v-if="(item.formEditType === 'dataSelector' || item.formEditType === 'conceptSelector')"
        >
          <Select
            v-model="item.value.type"
            @on-change="changeDataSelectType(item,index,true)"
            v-if="item.formEditType === 'dataSelector'"
          >
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <Input class="data-select" :value="item.value.id" placeholder="请选择路径" disabled/>
          <i class="iconfont icon-file" @click="changeDataSelectType(item,index)"/>
        </template>

        <!-- 数字框int -->
        <InputNumber
          v-if="item.formEditType === 'int'"
          :value="item.value"
          placeholder="请输入参数"
          clearable
          style="width:100%"
          :precision="0"
          @on-change="reuseChange($event,item.name,index)"
        />

        <!-- 文件选择 -->
        <template v-if="item.formEditType === 'file'">
          <!-- <Input
            style="width:90%"
            :value="item.value"
            placeholder="请输入文件路径"
            @on-blur="reuseChange($event,item.name,index)"
          /> -->

          <AutoComplete
            style="width:90%"
            :key="new Date().getTime()"
            :value="item.value"
            @autoBlur="commonChange($event,item.name,index)"
          />
          <i
            class="iconfont icon-file"
            @click="argFileHandler(item.value,index)"
            style="cursor:pointer"
          />
        </template>

        <!-- 布尔值 -->
        <RadioGroup
          :value="item.value"
          v-if="item.formEditType === 'bool'"
          style="text-align:center"
          @on-change="reuseChange($event,item.name,index)"
        >
          <Radio label="true"></Radio>
          <Radio label="false"></Radio>
        </RadioGroup>
      </FormItem>
    </Form>

    <!-- 选择结构数据 -->
    <Modal footer-hide title="选择数据集数据" v-model="dsdataVisible" width="670px">
      <dsdata
        :fileUrl="dataArg"
        :hidePreview="true"
        v-if="dsdataVisible"
        @cancelHandler="dsdataVisible=false"
        @okHandler="dsdataOkHandler"
      />
    </Modal>

    <!-- 选择图谱数据 -->
    <Modal footer-hide title="选择图谱数据" v-model="ceptdataVisible"  width="800px" class="cept-workflow-modal">
      <ceptdata
        :fileUrl="ceptArg"
        :hidePreview="true"
        v-if="ceptdataVisible"
        @cancelHandler="ceptdataVisible=false"
        @okHandler="ceptdataOkHandler"
      />
    </Modal>

    <!-- 参数文件 -->
    <Modal footer-hide title="选择文件" v-model="argfileVisible" width="700px">
      <filedata
        :filePath="argfileValue"
        v-if="argfileVisible"
        @cancelHandler="argfileVisible=false"
        @okHandler="argfileOkHandler"
      />
    </Modal>
  </div>
</template>

<script>
import { wfCode } from 'assets/scripts/code';
import Dsdata from '../Common/Dsdata';
import Ceptdata from '../Common/Ceptdata';
import Filedata from '../Common/Filedata';
import AutoComplete from '../Common/AutoComplete';
import { updateCustomNode } from 'http/api/workflow';
import { mapState, mapMutations } from 'vuex';

export default {
  props: ['nodeInfo'],
  components: {
    Dsdata,
    Ceptdata,
    Filedata,
    AutoComplete
  },
  watch: {
    nodeInfo () {
      this.setNodeInfo();
    }
  },
  computed: {
    ...mapState({
      currentNode: state => state.workflow.currentNode,
      link: state => state.workflow.link,
      node: state => state.workflow.node
    })
  },
  data () {
    return {
      pipelineId: null,
      name: '',
      argValues: {},
      args: null,
      typeList: [
        {
          label: '数据集数据',
          value: 'ds'
        },
        {
          label: '图谱数据',
          value: 'cept'
        }
      ],
      dsdataVisible: false,
      ceptdataVisible: false,
      dataArg: '',
      ceptArg: '',
      currentIndex: null,

      // 参数文件的选择
      argfileValue: '',
      argfileIndex: null,
      argfileVisible: false
    };
  },
  methods: {
    ...mapMutations(['setNode']),

    // 参数文件选择
    argFileHandler (value, index) {
      this.argfileValue = value;
      this.argfileIndex = index;
      this.argfileVisible = true;
    },

    // 参数文件选择后
    argfileOkHandler (url) {
      let singleArgName = this.args[this.argfileIndex].name;
      this.reuseChange(url, singleArgName, this.argfileIndex);
      this.argfileVisible = false;
    },

    // 重置编辑信息
    setNodeInfo () {
      let { name, args, argValues } = this.nodeInfo;
      this.name = name;
      this.args = args;
      this.argValues = argValues ? JSON.parse(argValues) : {};
      if (this.args) {
        this.args.forEach(item => {
          let argValueItem = this.argValues[item.name];
          item.value = argValueItem || item.defaultValue;

          if (item.formEditType === 'int' && item.value) {
            item.value = Number(item.value);
          }
          if (
            (item.formEditType === 'dataSelector' ||
              item.formEditType === 'conceptSelector') &&
            !item.value
          ) {
            item.value = {
              id: item.defaultValue ? item.defaultValue : '',
              type: item.formEditType === 'conceptSelector' ? 'cept' : '',
              name: ''
            };
          }

          if (!this.argValues[item.name]) {
            this.argValues[item.name] = item.value;
          }
        });
      }
    },

    // 自定义数据修改
    reuseChange (e, name, index) {
      let nodeName = e.target && e.target.nodeName;
      let value;
      if (nodeName === 'INPUT' || nodeName === 'TEXTAREA') {
        value = e.target.value;
        value = value.trim();
        if (value === '') {
          return;
        }
      } else {
        value = e;
      }

      // 改变单个参数的值
      this.argValues[name] = value;
      this.args[index].value = value;
      this.updateNodeInfo();
    },

    // 节点更新
    updateNodeInfo () {
      let { x, y, id } = this.currentNode;

      let param = {
        id: id,
        location: { x, y },
        pipeline: {
          id: this.pipelineId
        },
        argValues: JSON.stringify(this.argValues)
      };

      let wires = [];
      this.link.forEach(item => {
        let { start, end } = item;
        if (start === id) {
          wires.push({
            srcId: start,
            desId: end
          });
        }
      });

      param.wires = wires;
      param.pipelineTaskNodeType = wfCode.MULTIPLEXT;

      // 先改数据
      this.node[id] = Object.assign({}, this.node[id], param);
      this.setNode(this.node);

      updateCustomNode(param).then(res => {
        this.node[id] = Object.assign({}, this.node[id], res.data);
        this.setNode(this.node);
      });
    },

    // 选择数据的更改
    changeDataSelectType (item, index, boolean) {
      if (boolean) {
        // 值清空
        this.args[index].value.id = '';
        this.argValues[item.name].id = '';
      }

      let { value } = item;
      let { type, id } = value;

      // 数据结构
      if (type === 'ds') {
        this.dsdataVisible = true;
        this.dataArg = boolean ? '' : id;
      }

      if (type === 'cept') {
        this.ceptdataVisible = true;
        this.ceptArg = boolean ? '' : id;
      }

      this.currentIndex = index;
    },

    // 设置参数的值
    setArg (id, name) {
      let index = this.currentIndex;
      let optArg = this.args[index];

      this.args[index].value.id = id;
      this.args[index].value.name = name;

      this.argValues[optArg.name].id = id;
      this.argValues[optArg.name].name = name;
    },

    // 选择数据
    dsdataOkHandler ({ id, name }) {
      this.setArg(id, name);
      this.dsdataVisible = false;
      this.updateNodeInfo();
    },

    // 图谱数据
    ceptdataOkHandler ({ id, name }) {
      this.setArg(id, name);
      this.ceptdataVisible = false;
      this.updateNodeInfo();
    }
  },
  mounted () {
    this.pipelineId = this.$route.query.pipelineId;

    // 节点编辑信息
    if (this.nodeInfo) {
      this.setNodeInfo();
    }
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.page-reuse {
  .reuse-form {
    padding-top: 20px;
    padding-right: 20px;
    min-height: 450px;
  }

  .data-select {
    width: 92%;
    margin-top: 5px;
  }
  .icon-file {
    position: relative;
    top: 5px;
    cursor: pointer;
  }
}
</style>
